<template>
  <div class="my-counter">
    <button type="button" class="btn btn-light" @click="sub">-</button>
    <input
      type="number"
      v-model.number="pro.goods_count"
      class="form-control inp"
    />
    <button type="button" class="btn btn-light" @click="add">+</button>
  </div>
</template>

<script>
export default {
  // this.pro = {}
  // 接收 商品详细数据（实际传递的是 对象的 内存地址）
  props: ["pro"],
  data() {
    return {};
  },
  methods: {
    sub() {
      if (this.pro.goods_count <= 1) return alert("不能在少了，客官~！");
      this.pro.goods_count--;
    },
    add() {
      this.pro.goods_count++;
    },
  },
  // 侦听器
  watch: {
    // 侦听 pro中的 单个属性
    "pro.goods_count": {
      handler(newVal) {
        // 如果 输入的数字 <1，则 设置为 1
        if (newVal < 1) this.pro.goods_count = 1;
      },
    },
  },
};
</script>

<style lang="less" scoped>
.my-counter {
  display: flex;
  .inp {
    width: 45px;
    text-align: center;
    margin: 0 10px;
  }
  .btn,
  .inp {
    transform: scale(0.9);
  }
}
</style>